<template>
  <div>
    <div class="reg_login-die" v-if="loginisshow">
      <ul>
        <li>
          <img src="http://www.zhaoshengku.net/wx-%E9%94%99.png" @click="bacNav" alt />
        </li>
        <li>
          <span
            v-for="(item,index) in loginPassloginReg"
            :key="index"
            @click="tabLogin(index)"
            :class="loginPassloginTab==index?'reg_login-die-span':''"
          >{{item}}</span>
        </li>
      </ul>
      <ul>
        <li>
          <ul>
            <li class="reg_login-login" v-show="loginPassloginRegs==0">
              <ul>
                <li>
                  <img src="http://www.zhaoshengku.net/wx-sjhtb.png" alt />
                  <input
                    type="text"
                    placeholder="手机号码"
                    v-model.lazy="userLogin"
                    @blur="zzInputLogin"
                    maxlength="11"
                    placeholder-class="placeholder"
                  />
                  <span v-if="wxflg==2">微信尚未绑定任何账号，请尝试登录或注册</span>
                  <span v-if="phobV==2">手机号码格式错误</span>
                </li>
                <li>
                  <img
                    src="http://www.zhaoshengku.net/wx-%E9%94%AE%E7%9B%98%20%E6%8B%B7%E8%B4%9D%204.png"
                    alt
                  />
                  <input
                    type="password"
                    placeholder="密码"
                    v-model.lazy="passLogin"
                    placeholder-class="placeholder"
                  />
                </li>
                <li class="login_icom" @click="loginPass">
                  <img src="http://www.zhaoshengku.net/wx-%E7%99%BB%E5%BD%95%282%29.png" alt />
                </li>
                <li class="login_pass">
                  <span @click="tabLoginPass">验证码登录</span>
                  <span>|</span>
                  <span @click="forgetPass">忘记密码</span>
                </li>
                <li>
                  <span></span>

                  <div>
                    <p>
                      <button
                        class="yf_submitBtn"
                        open-type="getUserInfo"
                        @getuserinfo="bindgetuserinfo"
                      >
                        <img src="http://www.zhaoshengku.net/wx-wx.png" alt />
                      </button>
                    </p>
                    <p>第三方登录</p>
                  </div>
                  <span></span>
                </li>
              </ul>
            </li>
            <li class="reg_login-passLogin" v-if="loginPassloginPass==1">
              <ul>
                <li>
                  <img src="http://www.zhaoshengku.net/wx-sjhtb.png" alt />
                  <input
                    type="text"
                    placeholder="手机号码"
                    v-model.lazy="userLogin"
                    @blur="zzInputLogin"
                    maxlength="11"
                    placeholder-class="placeholder"
                  />
                  <p v-if="phobV==2">手机号码格式错误</p>
                </li>
                <li>
                  <img src="http://www.zhaoshengku.net/wx-%E6%A4%AD%E5%9C%86%202.png" alt />
                  <input
                    type="text"
                    placeholder="请输入验证码"
                    v-model.lazy="codeYanz"
                    placeholder-class="placeholder"
                  />
                  <span @click="registerSendvalidate(1)" v-html="spanVal">获取验证码</span>
                  <p v-if="Fanyanz">验证码错误</p>
                </li>
                <li @click="fyloginYan">
                  <img src="http://www.zhaoshengku.net/wx-%E7%99%BB%E5%BD%95%282%29.png" alt />
                </li>
                <li @click="tabLoginPassword">密码登录</li>
              </ul>
            </li>
            <li class="reg_login-register" v-if="loginPassloginRegs==1">
              <ul>
                <li v-on:click="regImg">
                  <img src="http://www.zhaoshengku.net/wx-%E6%A4%AD%E5%9C%86%204.png" alt />
                  <input
                    type="text"
                    placeholder="我是(*角色选定后不可更改)"
                    v-model.lazy="typeValue"
                    disabled="true"
                    placeholder-class="placeholder"
                  />
                  <img
                    src="http://www.zhaoshengku.net/wx-xz.png"
                    alt
                    :class="regLoginRegisterImgs==1?'reg_login-register-img':''"
                  />
                  <ul :class="regLoginRegisterImgs==1?'reg_login-register_ul':''">
                    <li
                      v-for="(item,index) in Roleselection"
                      :key="index"
                      @click.stop="clickType(index)"
                    >{{item}}</li>
                  </ul>
                  <div></div>
                </li>
                <li>
                  <img src="http://www.zhaoshengku.net/wx-sjhtb.png" alt />
                  <input
                    type="text"
                    placeholder="请输入手机号码"
                    v-model.lazy="registerMedia"
                    @blur="zzInput"
                    maxlength="11"
                    placeholder-class="placeholder"
                  />
                  <p v-if="phobV==2">手机号码格式错误</p>
                </li>
                <li>
                  <img src="http://www.zhaoshengku.net/wx-yonghui.png" alt />
                  <input
                    type="text"
                    name
                    id
                    placeholder="命名您的招生网站"
                    v-model.lazy="registerInfo_nick"
                    placeholder-class="placeholder"
                  />
                </li>
                <li>
                  <img
                    src="http://www.zhaoshengku.net/wx-%E9%94%AE%E7%9B%98%20%E6%8B%B7%E8%B4%9D%204.png"
                    alt
                  />
                  <input
                    type="password"
                    placeholder="请输入密码"
                    v-model.lazy="registerPwd"
                    @blur="mimayanz"
                    placeholder-class="placeholder"
                  />
                </li>
                <li>
                  <img src="http://www.zhaoshengku.net/wx-%E6%A4%AD%E5%9C%86%202.png" alt />
                  <input
                    type="text"
                    name
                    id
                    placeholder="请输入验证码"
                    v-model.lazy="registerCaptcha"
                    placeholder-class="placeholder"
                  />
                  <input
                    type="text"
                    @click="registerSendvalidate(3)"
                    disabled="true"
                    v-model.lazy="spanVal"
                  />
                  <p v-if="codeV==2">验证码错误</p>
                </li>
                <li @click="register">
                  <img src="http://www.zhaoshengku.net/wx-%E6%B3%A8%E5%86%8C.png" alt />
                </li>
                <li>
                  <span>点击注册即表示同意</span>
                  <span @click="userAgreement">《招生库用户协议》</span>
                </li>
              </ul>
            </li>
            <li v-if="loginPassloginRegs==1"></li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="aut_login" :style="windowHeights" v-else>
      <div class="login">
        <div class="img">
          <img src="https://www.zhaoshengku.net/wx-logo.png" alt />
        </div>
        <div class="texts">为教育提供服务</div>
      </div>
      <div>
        <button open-type="getUserInfo" @getuserinfo="bindgetuserinfo" class="loginButt">微信登录</button>
      </div>
    </div>
  </div>
</template>

<script>
import { Base64 } from "js-base64";
export default {
  data() {
    return {
      loginPassloginReg: ["登录", "注册"],
      loginPassloginRegs: 0,
      loginPassloginPass: 0,
      loginPassloginTab: 0,
      userLogin: "",
      passLogin: "",
      Roleselection: ["教育机构", "招生工作者", "学生/家长"],
      regLoginRegisterImgs: 0,
      registerMedia: "",
      typeValue: "",
      type: -1,
      registerPwd: "",
      registerInfo_nick: "",
      registerCaptcha: "",
      spanVal: "获取验证码",
      times: 60,
      phobV: 1,
      wxflg: 1,
      userinfo: {},
      codeYanz: "",
      Fanyanz: false,
      windowHeights: "",
      loginisshow: false,
      fromid: -1,
      passZz: "^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$",
      mimis: false
    };
  },
  methods: {
    // 登录
    loginPass() {
      var headerCode;
      var login = this.userinfo;
      login.user = this.userLogin;
      login.pwd = this.passLogin;
      login.captcha = "[]";
      console.log("我的login", login);
      wx.request({
        url: "https://api.zhaoshengku.net/index/login/login",
        data: login,
        header: {
          "content-type": "application/x-www-form-urlencoded"
        },
        method: "post",
        success: res => {
          console.log(res);
          if (res.data.code == 200) {
            let resCode = Base64.decode(res.data.data.code);
            headerCode = Base64.encode("ywhkj" + resCode);
          } else if ((res.data.code = 40003)) {
            wx.showToast({
              title: "访问过于频繁,请稍后重试",
              icon: "none",
              duration: 2000
            });
          }
          if (res.data.msg == "账号或者密码错误") {
            wx.showToast({
              title: res.data.msg,
              icon: "none",
              duration: 2000
            });
            return;
          }
          wx.request({
            url: "https://api.zhaoshengku.net/index/login/verifytoken",
            data: {},
            header: {
              "content-type": "application/x-www-form-urlencoded",
              Authorization: "Bearer " + headerCode
            },
            method: "post",
            success: res => {
              if (res.data.code == 200) {
                wx.request({
                  url: "https://api.zhaoshengku.net/index/member/getinfo",
                  header: {
                    Authorization: this.Authorization
                  },
                  method: "post",
                  success: res => {
                    if (res.data.code == 200) {
                      this.$store.state.myxinxi = res.data.data;
                    }
                  },
                  fail: res => {
                    if (res.errMsg) {
                      wx.showToast({
                        title: "请检查网络连接！",
                        icon: "none",
                        duration: 1500
                      });
                    }
                  }
                });
                wx.hideToast();
                if (this.fromid != -1 && this.fromid != 0) {
                  wx.reLaunch({
                    url: "/pages/index/main"
                  });
                } else {
                  wx.navigateBack({
                    delta: 1
                  });
                }
                wx.setStorage({
                  key: "koken",
                  data: headerCode
                });
              }
            },
            fail: res => {
              console.log(res);
              if (res.errMsg) {
                wx.showToast({
                  title: "请检查网络连接！",
                  icon: "none",
                  duration: 1500
                });
              }
            }
          });
        },
        fail: res => {
          console.log(res);
          if (res.errMsg) {
            wx.showToast({
              title: "请检查网络连接！",
              icon: "none",
              duration: 1500
            });
          }
        }
      });
    },
    tabLogin(e) {
      this.loginPassloginTab = e;
      this.loginPassloginRegs = e;
      if (this.loginPassloginRegs == 1) {
        this.loginPassloginReg[0] = "登录";
      }
      this.loginPassloginPass = 0;
      this.phobV = 1;
      this.userLogin = "";
      this.passLogin = "";
      this.registerMedia = "";
      this.typeValue = "";
      this.registerPwd = "";
      this.registerInfo_nick = "";
      this.registerCaptcha = "";
      this.regLoginRegisterImgs = 0;
    },
    tabLoginPass() {
      this.loginPassloginPass = 1;
      this.loginPassloginRegs = 2;
      this.loginPassloginReg[0] = "验证码登录";
      this.phobV = 1;
      this.regLoginRegisterImgs = 0;
    },
    tabLoginPassword() {
      this.loginPassloginTab = 0;
      this.loginPassloginRegs = 0;
      this.loginPassloginReg[0] = "登录";
      this.loginPassloginPass = 0;
      this.phobV = 1;
      this.userLogin = "";
      this.passLogin = "";
      this.registerMedia = "";
      this.typeValue = "";
      this.registerPwd = "";
      this.registerInfo_nick = "";
      this.registerCaptcha = "";
      this.regLoginRegisterImgs = 0;
    },
    regImg() {
      if (this.regLoginRegisterImgs == 0) {
        this.regLoginRegisterImgs = 1;
      } else {
        this.regLoginRegisterImgs = 0;
      }
    },
    // 页面跳转
    userAgreement() {
      wx.navigateTo({
        url: "/pages/userAgreement/main",
        events: {
          acceptDataFromOpenedPage: function(data) {},
          someEvent: function(data) {},

          success: function(res) {
            // 通过eventChannel向被打开页面传送数据
            res.eventChannel.emit("acceptDataFromOpenerPage", { data: "test" });
          }
        }
      });
    },
    forgetPass() {
      wx.navigateTo({
        url: "/pages/forgetPass/main"
      });
    },
    // 注册账号
    register() {
      if (this.mimis) {
        return;
      }
      if (this.type == -1) {
        wx.showToast({
          title: "请选定角色",
          icon: "none",
          duration: 2000
        });
        return;
      }
      if (this.registerMedia == "") {
        wx.showToast({
          title: "请输入手机号",
          icon: "none",
          duration: 2000
        });
        return;
      }
      if (this.registerInfo_nick == "") {
        wx.showToast({
          title: "请输入网站名称",
          icon: "none",
          duration: 2000
        });
        return;
      }
      if (this.registerPwd == "") {
        wx.showToast({
          title: "请输入密码",
          icon: "none",
          duration: 2000
        });
        return;
      }
      if (this.registerCaptcha == "") {
        wx.showToast({
          title: "请输入验证码",
          icon: "none",
          duration: 2000
        });
        return;
      }

      var data = this.userinfo;
      data.media = this.registerMedia;
      data.type = this.type;
      data.pwd = this.registerPwd;
      data.code = this.registerCaptcha;
      data.info_nick = this.registerInfo_nick;
      data.user = this.registerMedia;
      if (this.fromid != -1) {
        data.fromid = this.fromid;
      }
      wx.request({
        url: "https://api.zhaoshengku.net/index/login/register",
        data: data,
        method: "POST",
        header: {},
        success: res => {
          if (res.data.code == 200) {
            this.userLogin = this.registerMedia;
            this.passLogin = this.registerPwd;
            wx.showToast({
              title: "注册成功,正在登陆！",
              icon: "loading",
              duration: 3000
            });
            this.loginPass();
          } else {
            wx.showToast({
              title: res.data.mag,
              icon: "none",
              duration: 1000
            });
          }
          if (res.data.msg == "code长度不符合要求 6") {
            this.codeV = 2;
            return;
          } else if (res.data.msg == "请先发送验证码") {
            this.codeV = 2;
            return;
          } else if (
            res.data.msg == "您的手机已绑定其他账号，请尝试使用该账户进行登录！"
          ) {
            wx.showToast({
              title: res.data.msg,
              icon: "none",
              duration: 2000
            });
            return;
          }
        },
        fail: res => {
          console.log(res);
          if (res.errMsg) {
            wx.showToast({
              title: "请检查网络连接！",
              icon: "none",
              duration: 1500
            });
          }
        }
      });
    },
    // 获取验证码
    registerSendvalidate(e) {
      if (this.phobV == 2) {
        return;
      }
      if (this.times != 60) {
        return;
      }
      var time = setInterval(() => {
        this.times--;
        this.spanVal = this.times + "秒后重新获取";
        if (this.times == 0) {
          this.spanVal = "点击重新获取";
          this.times = 60;
          clearInterval(time);
        }
      }, 1000);
      var user;
      if (e == 3) {
        user = this.registerMedia;
      } else {
        user = this.userLogin;
      }
      wx.request({
        url: "https://api.zhaoshengku.net/index/login/sendvalidate",
        data: {
          type: e,
          user: user
        },
        header: {},
        method: "POST",
        success(res) {}
      });
    },
    // 选择角色
    clickType(e) {
      this.typeValue = this.Roleselection[e];
      this.type = e + 1;
      this.regLoginRegisterImgs = 0;
    },
    // 正则表达式
    zzInput() {
      if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.registerMedia)) {
        this.phobV = 2;
        this.wxflg = 1;
      } else {
        this.phobV = 1;
      }
    },
    zzInputLogin(e) {
      if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.userLogin)) {
        this.phobV = 2;
        this.wxflg = 1;
      } else {
        this.phobV = 1;
      }
    },
    // 关闭页面
    bacNav() {
      wx.reLaunch({
        url: "/pages/index/main?for=dongtai"
      });
    },
    bindgetuserinfo(e) {
      if (wx.canIUse("button.open-type.getUserInfo")) {
        // 用户版本可用
      } else {
        wx.showToast({
          title: "请升级微信版本！",
          icon: "none",
          duration: 2500
        });
      }

      if (e.mp.detail.rawData) {
        wx.showToast({
          title: "授权成功！正在尝试登陆！",
          icon: "none",
          duration: 5000
        });
        //用户按了允许授权按钮
        this.loginOk(e.mp.detail);
      } else {
        //用户按了拒绝按钮
        wx.showToast({
          title: "您拒绝了授权信息！",
          icon: "none",
          duration: 2500
        });
      }
    },
    loginOk(res) {
      //登录成功后的信息处理
      let _this = this;
      _this.userinfo.encryptedData = res.encryptedData;
      _this.userinfo.iv = res.iv;
      _this.userinfo.rawData = res.rawData;
      _this.userinfo.signature = res.signature;
      _this.userinfo.infos = res.userInfo;
      _this.getOpenId();
      _this.isCeng = false;
      _this.userName = res.userInfo.nickName;
    },
    getOpenId() {
      //获取用户的openid
      let _this = this;
      wx.login({
        success(res) {
          if (res.code) {
            // 发起网络请求
            wx.request({
              url: "https://api.zhaoshengku.net/api/data/wx_program",
              method: "POST",
              header: {
                "content-type": "application/x-www-form-urlencoded"
              },
              data: {
                grant_type: "authorization_code", //默认authorization_code
                js_code: res.code //wx.login登录获取的code值
              },
              success: res => {
                if (res.data.code === 200) {
                  let resCode = Base64.decode(res.data.data.code);
                  var headerCode = Base64.encode("ywhkj" + resCode);

                  wx.request({
                    url: "https://api.zhaoshengku.net/index/login/verifytoken",
                    data: {},
                    header: {
                      "content-type": "application/x-www-form-urlencoded",
                      Authorization: "Bearer " + headerCode
                    },
                    method: "post",
                    success: res => {
                      if (res.data.code == 200) {
                        wx.request({
                          url:
                            "https://api.zhaoshengku.net/index/member/getinfo",
                          header: {
                            Authorization: "Bearer " + headerCode
                          },
                          method: "post",
                          success: res => {
                            if (res.data.code == 200) {
                              _this.$store.state.myxinxi = res.data.data;
                            }
                          },
                          fail: res => {
                            if (res.errMsg) {
                              wx.showToast({
                                title: "请检查网络连接！",
                                icon: "none",
                                duration: 1500
                              });
                            }
                          }
                        });
                        wx.showToast({
                          title: "登录成功！",
                          icon: "none",
                          duration: 1000
                        });
                        if (_this.fromid != -1 && _this.fromid != 0) {
                          wx.reLaunch({
                            url: "/pages/index/main"
                          });
                        } else {
                          wx.navigateBack({
                            delta: 1
                          });
                        }
                        _this.$store.state.openid = true;

                        wx.setStorage({
                          key: "koken",
                          data: headerCode
                        });
                      }
                    },
                    fail: res => {
                      console.log(res);
                      if (res.errMsg) {
                        wx.showToast({
                          title: "请检查网络连接！",
                          icon: "none",
                          duration: 1500
                        });
                      }
                    }
                  });
                  wx.hideToast();
                }
                if (res.data.code === 201) {
                  _this.phobV = 1;
                  _this.wxflg = 2;
                  _this.loginPassloginRegs = 1;
                  wx.showToast({
                    title: "请登录或注册绑定微信！",
                    icon: "none",
                    duration: 1000
                  });
                  _this.userinfo.openid = res.data.openid;
                  _this.userinfo.session_key = res.data.session_key;
                  _this.loginisshow = true;
                  _this.loginPassloginRegs = 0;
                  wx.hideToast();
                }
              },
              fail: res => {
                console.log(res);
                if (res.errMsg) {
                  wx.showToast({
                    title: "请检查网络连接！",
                    icon: "none",
                    duration: 1500
                  });
                }
              }
            });
          } else {
          }
        }
      });
    },
    // 验证码登录
    fyloginYan() {
      var data = this.userInfo;
      data.code = this.codeYanz;
      data.user = this.userLogin;

      var headerCode;
      if (this.phobV == 2) {
        return;
      }
      var headerCode;

      wx.request({
        url: "https://api.zhaoshengku.net/index/login/verifylogin",
        method: "post",
        data: data,
        success: res => {
          if (res.data.code == 495) {
            this.Fanyanz = true;
          } else if (res.data.code == 200) {
            let resCode = Base64.decode(res.data.data.code);
            headerCode = Base64.encode("ywhkj" + resCode);
            wx.request({
              url: "https://api.zhaoshengku.net/index/login/verifytoken",
              data: {},
              header: {
                "content-type": "application/x-www-form-urlencoded",
                Authorization: "Bearer " + headerCode
              },
              method: "post",
              success: res => {
                if (res.data.code == 200) {
                  wx.navigateBack({
                    delta: 1
                  });
                  wx.setStorage({
                    key: "koken",
                    data: headerCode
                  });
                  wx.request({
                    url: "https://api.zhaoshengku.net/index/member/getinfo",
                    header: {
                      Authorization: this.headerCode
                    },
                    method: "post",
                    success: res => {
                      if (res.data.code == 200) {
                        this.$store.state.myxinxi = res.data.data;
                      }
                    },
                    fail: res => {
                      console.log(res);
                      if (res.errMsg) {
                        wx.showToast({
                          title: "请检查网络连接！",
                          icon: "none",
                          duration: 1500
                        });
                      }
                    }
                  });
                }
              },
              fail: res => {
                console.log(res);
                if (res.errMsg) {
                  wx.showToast({
                    title: "请检查网络连接！",
                    icon: "none",
                    duration: 1500
                  });
                }
              }
            });
          }
        },
        fail: res => {
          console.log(res);
          if (res.errMsg) {
            wx.showToast({
              title: "请检查网络连接！",
              icon: "none",
              duration: 1500
            });
          }
        }
      });
    },
    // 正则验证密码
    mimayanz() {
      if (
        !/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/.test(this.registerPwd)
      ) {
        this.mimis = true;
        wx.showToast({
          title: "密码格式不正确！",
          icon: "none",
          duration: 1000
        });
      } else {
        this.mimis = false;
      }
    }
  },
  mounted() {
    this.loginPassloginTab = this.$root.$mp.query.id;
    this.loginPassloginRegs = this.$root.$mp.query.id;
    this.phobV = 1;
    this.spanVal = "获取验证码";
    this.regLoginRegisterImgs = 0;
    this.times = 60;
    this.Fanyanz = false;
    wx.getSystemInfo({
      success: res => {
        this.windowHeights = "height:" + res.windowHeight * 2 + "rpx";
      }
    });
    // 设置头
    wx.setNavigationBarTitle({
      title: "登录/注册"
    });
  },
  onUnload() {
    //this.userLogin = "";
    this.passLogin = "";
    this.registerMedia = "";
    this.typeValue = "";
    this.registerPwd = "";
    this.registerInfo_nick = "";
    this.registerCaptcha = "";
  },
  onLoad(option) {
    // if (this.$store.state.openid == false) {
    //   this.loginisshow = false;
    // } else {
    //   this.loginisshow = true;
    // }
    if (option.id) {
      this.fromid = option.id;
    }
    if (option.scene) {
      this.fromid = option.scene;
    }
    console.log(this.fromid);
  },
  onShow() {
    this.loginisshow = false;
    this.$store.state.openid = false;
    this.regLoginRegisterImgs = 0;
  }
};
</script>

<style scoped>
.login > .img > img {
  width: 250rpx;
  height: 104rpx;
}
.login > .texts {
  font-size: 24rpx;
  color: rgba(153, 153, 153, 1);
  margin-top: 20rpx;
}
.login {
  width: 100%;
  text-align: center;
  margin-top: 80rpx;
}
.aut_login {
  width: 100%;
}
.loginButt {
  width: 500rpx;
  margin: 0 auto;
  text-align: center;
  height: 80rpx;
  line-height: 80rpx;
  color: #fff;
  background: #2297d4;
  font-size: 30rpx;
  margin-top: 150rpx;
}
/* 注册模块开始 */
.weui-cell__hd > img {
  width: 44rpx;
  height: 44rpx;
  margin-right: 22rpx;
}
.reg_login-register > ul {
  padding: 0 34rpx;
  background: #fff;
}
.reg_login-register > ul > li {
  height: 80rpx;
  line-height: 80rpx;
  display: flex;
  align-items: center;
  border-bottom: 2rpx solid #dddddd;
  position: relative;
  padding-top: 20rpx;
}
.reg_login-register > ul > li > img:nth-child(1) {
  width: 44rpx;
  height: 44rpx;
  margin-right: 22rpx;
}
.reg_login-register > ul > li > input:nth-child(2) {
  font-size: 12px;
  font-weight: 400;
  color: #333;
  flex: 1;
}
.reg_login-register > ul > li:nth-child(1) > img:nth-child(3) {
  width: 16rpx;
  height: 28rpx;
  margin-right: 15rpx;
}
.reg_login-register > ul > li:nth-child(1) > div:last-child {
  width: 30rpx;
  height: 30rpx;
  position: absolute;
  right: 10rpx;
  bottom: 24rpx;
  z-index: 22;
}
.reg_login-register > ul > li:nth-child(1) > div:nth-child(3) {
  width: 30rpx;
}
.reg_login-register > ul > li:nth-child(1) > .reg_login-register-img {
  transform: rotate(90deg);
}
.reg_login-register > ul > li:nth-child(5) {
  padding-top: 50rpx;
}
.reg_login-register > ul > li:nth-child(5) > input:nth-child(3) {
  border-radius: 10rpx;
  display: inline-block;
  font-size: 12px;
  font-weight: 400;
  color: rgba(34, 151, 212, 1);
  border: 1px solid #2297d4;
  width: 199rpx;
  height: 72rpx;
  line-height: 72rpx;
  text-align: center;
}
.reg_login-register > ul > li > p {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 0, 0, 1);
  position: absolute;
  right: 10rpx;
  bottom: -60rpx;
}
.reg_login-register > ul > li:nth-child(6) {
  width: 692rpx;
  height: 98rpx;
  margin: 0;
  border-bottom: none;
  margin-top: 72rpx;
}
.reg_login-register > ul > li:nth-child(6) > img {
  width: 692rpx;
  height: 98rpx;
}
.reg_login-register > ul > li:nth-child(7) {
  margin-top: 33rpx;
  width: 450rpx;
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  border-bottom: none;
  margin: 0 auto;
}
.reg_login-register > ul > li:nth-child(7) > span:last-child {
  color: #2297d4;
}
.reg_login-register > ul > li:nth-child(1) {
  position: relative;
  transition: all 0.5s;
}
.reg_login-register > ul > li:nth-child(1) > ul {
  width: 146rpx;
  height: 212rpx;
  background: #fff;
  box-shadow: #666666 0rpx 0rpx 10rpx;
  padding: 0 19rpx;
  box-sizing: border-box;
  position: absolute;
  right: 0rpx;
  bottom: -190rpx;
  z-index: 222222;
  display: none;
}
.reg_login-register > ul > li:nth-child(1) > .reg_login-register_ul {
  display: block;
}
.reg_login-register > ul > li:nth-child(1) > ul > li {
  width: 100%;
  text-align: center;
  font-size: 9px;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  height: 70rpx;
  line-height: 70rpx;
  border-bottom: 1rpx solid #e5e5e5;
}
/* 注册模块结束 */
/* 验证码登录模块开始 */
.reg_login-passLogin > ul {
  padding: 0 30rpx;
  background: #fff;
}
.reg_login-passLogin > ul > li {
  height: 90rpx;
  border-bottom: 2rpx solid #dddddd;
  display: flex;
  align-items: center;
  padding-top: 60rpx;
  position: relative;
}
.reg_login-passLogin > ul > li > img {
  width: 42rpx;
  height: 42rpx;
  margin-right: 22rpx;
  margin-top: 15rpx;
}
.reg_login-passLogin > ul > li > input {
  font-size: 14px;
  font-weight: 400;
  color: #333;
  flex: 1;
  margin-top: 15rpx;
}
.reg_login-passLogin > ul > li > span:nth-child(3) {
  border-radius: 10rpx;
  display: inline-block;
  font-size: 12px;
  font-weight: 400;
  color: rgba(34, 151, 212, 1);
  border: 1px solid #2297d4;
  width: 199rpx;
  height: 72rpx;
  line-height: 72rpx;
  text-align: center;
}
.reg_login-passLogin > ul > li:nth-child(2) > img {
  width: 44rpx;
  height: 44rpx;
}
.reg_login-passLogin > ul > li > p:last-child {
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(255, 0, 0, 1);
  position: absolute;
  border: none;
  right: 10rpx;
  bottom: -45rpx;
}
.reg_login-passLogin > ul > li:nth-child(3) {
  width: 692rpx;
  height: 98rpx;
  margin: 0 auto;
  margin-top: 194rpx;
  border-bottom: 0;
}
.reg_login-passLogin > ul > li:nth-child(3) > img {
  width: 100%;
  height: 100%;
}
.reg_login-passLogin > ul > li:nth-child(4) {
  font-size: 12px;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  margin-top: 20rpx;
  width: 100rpx;
  margin: 0 auto;
  border-bottom: 0;
}
/* 验证码登录模块结束 */
/* nav部分开始 */
.reg_login-die > ul:nth-child(1) {
  box-sizing: border-box;
  width: 100%;
  height: 534rpx;
  background: url("http://www.zhaoshengku.net/wx-login-bg.png") no-repeat;
  background-size: 100% 100%;
  background-position: center center;
  padding-top: 36rpx;
  position: relative;
}
.reg_login-die > ul:nth-child(1) > li:nth-child(1) > img {
  width: 33rpx;
  height: 36rpx;
  margin-right: 36rpx;
}
.reg_login-die > ul:nth-child(1) > li:nth-child(1) {
  width: 100%;
  text-align: right;
}
.reg_login-die > ul:nth-child(1) > li:nth-child(2) {
  display: flex;
  justify-content: space-between;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
.reg_login-die > ul:nth-child(1) > li:nth-child(2) > span {
  display: inline-block;
  width: 50%;
  font-size: 15px;
  text-align: center;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
  padding: 17rpx 0;
}

.reg_login-die-span {
  border-bottom: 6rpx solid #005f9e;
}

/* nav部分结束 */
/* 登录部分开始 */
.reg_login-login > ul:nth-child(1) {
  padding: 0 30rpx;
  background: #fff;
}
.reg_login-login > ul:nth-child(1) > li:nth-child(1),
.reg_login-login > ul:nth-child(1) > li:nth-child(2) {
  height: 80rpx;
  line-height: 80rpx;
  border-bottom: 1rpx solid #dddddd;
  display: flex;
  align-items: center;
  position: relative;
  padding-top: 20rpx;
}
.reg_login-login > ul:nth-child(1) > li:nth-child(1) > img,
.reg_login-login > ul:nth-child(1) > li:nth-child(2) > img {
  width: 42rpx;
  height: 42rpx;
  margin-right: 22rpx;
}
.reg_login-login > ul:nth-child(1) > li:nth-child(1) > input,
.reg_login-login > ul:nth-child(1) > li:nth-child(2) > input {
  font-size: 14px;
  font-weight: 400;
  color: #333;
}
.reg_login-login > ul:nth-child(1) > li:nth-child(1) > span,
.reg_login-login > ul:nth-child(1) > li:nth-child(2) > span {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 0, 0, 1);
  line-height: 52px;
  position: absolute;
  right: 10rpx;
  bottom: -75rpx;
}
.login_icom {
  width: 100%;
  text-align: center;
  margin-top: 72rpx;
}
.login_icom > img {
  width: 692rpx;
  height: 98rpx;
}
.login_pass {
  font-size: 12px;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  text-align: center;
  margin-top: 32rpx;
}
.login_pass > span {
  margin-right: 30rpx;
}
.login_pass > span:last-child {
  margin-right: 0;
}
.reg_login-login > ul:nth-child(1) > li:last-child {
  display: flex;
  justify-content: space-between;
  margin-top: 68rpx;
}
.reg_login-login > ul > li:last-child > span {
  width: 235rpx;
  height: 2rpx;
  display: inline-block;
  background: #dddddd;
  margin-top: 20rpx;
}
.reg_login-login > ul:nth-child(1) > li:last-child > div > p {
  text-align: center;
}
.reg_login-login > ul:nth-child(1) > li:last-child > div > p > img {
  width: 65rpx;
  height: 58rpx;
}
.reg_login-login > ul:nth-child(1) > li:last-child > div > p:nth-child(2) {
  font-size: 22rpx;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  line-height: 36rpx;
}
/* 登录部分开始 */

/*第三方登录*/
.yf_submitBtn {
  width: 65rpx;
  height: 58rpx;
  padding: 0;
  border: none;
  border-color: #fff;
}
button:after {
  border: none;
}
.yf_submitBtn img {
  width: 65rpx;
  height: 58rpx;
}
.placeholder {
  color: #999;
}
</style>
